<template>
    <div class="information_submission_box ">
        <p class="information_submission_title">请填写信息</p>
        <input type="text"  v-model.trim="postInfo.header" placeholder="请填写想要加入的职位">
        <input type="text"  v-model.trim="postInfo.body" placeholder="请填写您的邮箱">
        <br>
        <div class="information_submission_but">
            <button class="information_submission_sub" @click="sub(true)">提交</button>
            <button class="information_submission_sub" @click="sub(false)">取消</button>
        </div>

    </div>
</template>

<script setup>

import store from "@/store/index.js";
import {ref} from "vue";
import api from "@/request/index.js";
//emit事件
const emit = defineEmits(['join']);

// 需要提交的职位信息
const postInfo = ref({
    header: "",
    body: "",
    subject: "求职"//主题
});

//提交职位信息或取消填写
const sub = (bool) => {
    if ((!postInfo.value.header || !postInfo.value.body) && bool) {
        store.commit('info_sub', {msg: "请将信息填写完整！", type: 'error'});
        return;
    }
    if (bool) {
        api.getFeedback(postInfo.value).then((res) => {
            if (res.data.code === 200) {
                store.commit('info_sub', {msg: "请留意您的邮件信息", type: 'normal'});
            } else {
                store.commit('info_sub', {msg: "提交失败,请联系管理员!", type: 'error'});
            }
        });
    } else {
        store.commit('info_sub', {msg: "期待您的再次加入", type: 'normal'});
    }
    emit('join', false);
}

</script>

<style scoped>
.information_submission_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-30%);
    width: 300px;
    padding: 10px;
    background: white;
    box-shadow: 0 0 3px rgba(108, 109, 110);
}

.information_submission_title {
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #6da6e1;
}

input {
    text-indent: 10px;
    outline: none;
    width: 100%;
    border: 0;
    height: 40px;
    color: #6da6e1;
    margin: 6px 0;
    border-bottom: 1px solid rgba(96, 97, 98, 0.35);
}

.information_submission_sub {
    outline: none;
    border: 0;
    cursor: pointer;
    color: white;
    background: #6da6e1;
    width: 80px;
    height: 30px;
    margin: 0 7px;
}

.information_submission_but {
    width: 100%;
    text-align: center;
}

.information_submission_sub:hover {
    opacity: .8;
}
</style>